<template>
  <div id="licharts2" style="height: 20vh;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "roseEchart2",
  data() {
    return {
      chart: null,
      options: {},
      barData: [],
      lineData: [],
      category: []
    };
  },
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ""
    }
  },
  watch: {
    listData: {
      handler(val, newVal) {
        this.initOptions(val);
        this.initCharts();
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // this.getData();
    // this.inde();
  },
  mounted() {
    setTimeout(() => {
      this.initOptions();
      this.initCharts();
    }, 1000);
  },
  methods: {
    initOptions() {
      this.options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          // feature: {
          //   dataView: { show: true, readOnly: false },
          //   magicType: { show: true, type: ["line", "bar"] },
          //   restore: { show: true },
          //   saveAsImage: { show: true }
          // }
        },
        legend: {
          data: ["全区食品案件", "片区食品案件", "占比"]
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "全区食品案件",
            min: 0,
            max: 100,
            interval: 50,
            axisLabel: {
              formatter: "{value} 件"
            }
          },
          {
            type: "value",
            name: "片区食品案件",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} %"
            }
          }
        ],
        series: [
          {
            name: "全区食品案件",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value + " 数";
              }
            },
            data: [20, 41, 73, 23, 25, 76, 15, 16, 32, 20, 64, 33]
          },
          {
            name: "片区食品案件",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value + " 数";
              }
            },
            data: [2, 9, 9, 24, 27, 7, 17, 12, 7, 18, 0, 23]
          },
          {
            name: "占比",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value + " %";
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 1.2, 2.3, 3.4, 3.0, 6.5, 2.0, 6.2]
          }
        ]
      };
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById("licharts2"));
      this.chart.setOption(this.options);
    }
  }
};
</script>
